/**
 * @author swiip
 */

$C.create(["Archetype.component.graphicalStateComponent"], {
	setup: {
        views: ["first", "second"],
        behaviors: {
			first: {
				"li.class1": {
					click: function() {
						Logger.debug("click on 'li .class1' in view1");
						this.changeState("second");
					},
					mouseover: function() {
						Logger.debug("mouseOver on 'li .class1' in view1");
					}
				}
			},
			second: {
				"li.class1": {
					click: function() {
						Logger.debug("click on 'li .class1' in view2");
						this.changeState("first");
					}
				},
				"li.class2": {
					click: function() {
						Logger.debug("click on 'li .class2' in view2");
					}
				}
			}
		}
	},
	initialize: function() {
		Logger.debug("Graphical state component loaded !!");
		
		this.fireHelloWorld("With method name");
		this.fire("HelloWorld", "With parameter");
		
		this.anchor = $$("#bodyContent")[0];
		this.render();
	},
	fireHelloWorld: _,
	onHelloWorld: function(data) {
		Logger.debug("OnHelloWorld with method name");
	}
});